<template>
  <div class="new_strategy">
    <div class="publish">
      <h2>发表新攻略</h2>
      <p>分享你的个人游记，让更多人看到哦！</p>
      <div class="title">
        <el-input
          v-model="input"
          placeholder="请输入标题"
        ></el-input>
      </div>
      <div class="richedit">
        <client-only>
          <vue-editor
            style="height: 400px"
            v-model="inputText"
            :editorToolbar="customToolbar"
          ></vue-editor>
        </client-only>
      </div>
      <div class="selectcity">
        <span>选择城市</span>
        <el-row class="demo-autocomplete">
          <el-col :span="25">
            <el-autocomplete
              class="inline-input"
              v-model="state"
              :fetch-suggestions="querySearchCity"
              placeholder="请输入游玩城市"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-col>
        </el-row>
      </div>
      <div class="release">
        <el-button
          type="primary"
          size="small"
          class="release_btn"
          @click="issue"
        >发布</el-button>或者
        <span @click="save">保存到草稿</span>
      </div>
    </div>
    <div class="drafts">
      <div class="drafts_top">草稿箱 ({{draftscontent.length}})</div>
      <div
        class="drafts_bottom"
        v-if="draftscontent[0]"
      >
        <div
          class="drafts_bottom_content"
          v-for="(item,index) in draftscontent"
          :key="index"
        >
          <div class="drafts_content">
            <span>{{item.title}}</span>
            <span>{{item.time}}</span>
          </div>
          <div class="drafts_edit_del">
            <span
              class="iconfont el-icon-edit"
              @click="edit(index)"
            ></span>
            <span
              class="iconfont el-icon-delete"
              @click="delBtn(index)"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      input: "",
      inputText: "",
      customToolbar: [
        ["bold", "italic", "underline", "strike"],
        [{ header: "1" }, { header: "2" }],
        ["image"],
      ],
      state: "",
      draftscontent: [],
      id: 0,
    };
  },
  created() {
    const time = setInterval(() => {
      if (this.$store.state.drafts.draftHistory) {
        this.draftscontent = this.$store.state.drafts.draftHistory;
        console.log(this.draftscontent);

        clearInterval(time);
      }
    }, 100);
  },
  watch: {
    "$store.state.drafts.draftHistory"() {
      this.draftscontent = this.$store.state.drafts.draftHistory;
      var sure = false;
      this.draftscontent.forEach((v) => {
        if (v.id == this.id) {
          sure = true;
        }
      });
      if (sure) {
      }
    },
  },
  methods: {
    async querySearchCity(queryString, cb) {
      const res = await this.$axios.get("/cities", {
        params: {
          name: queryString,
        },
      });
      const list = res.data.data.map((v) => ({
        ...v,
        value: v.name,
      }));
      cb(list);
    },
    async issue() {
      if (!this.$store.state.user.token) {
        this.$store.commit("page/setSourceURL", this.$route.fullPath);
        this.$router.push("/user/login");
        this.$message({
          message: "请先登陆",
          type: "warning",
        });
        return;
      }
      // 验证文章
      if (this.input === "") {
        this.$confirm("请填写标题", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
      } else if (this.inputText === "") {
        this.$confirm("请填写内容", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
      } else if (this.state === "") {
        this.$confirm("请选择城市", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
      } else {
        // 发布文章
        const res = await this.$axios.post(
          "/posts",
          {
            content: this.inputText,
            title: this.input,
            city: this.state,
          },
          {
            headers: {
              Authorization: "Bearer " + this.$store.state.user.token,
            },
          }
        );
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.input = "";
        this.inputText = "";
        this.state = "";
        this.id = "";
      }
    },
    save() {
      if (this.input.trim() === "") {
        this.$message({
          message: "标题不能为空",
          type: "warning",
        });
      } else {
        this.$store.commit("drafts/push", {
          content: this.inputText,
          title: this.input,
          city: this.state,
          time: moment().format("YYYY-MM-DD"),
        });
        this.input = "";
        this.inputText = "";
        this.state = "";
        this.id = "";
      }
    },
    edit(index) {
      console.log(this.draftscontent[index]);
      this.input = this.draftscontent[index].title;
      this.inputText = this.draftscontent[index].content;
      this.state = this.draftscontent[index].city;
      this.id = this.draftscontent[index].id;
    },
    delBtn(index) {
      this.$confirm("确定删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.commit("drafts/delete", index);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.input = "";
        this.inputText = "";
        this.state = "";
        this.id = "";
      });
    },
  },
};
</script>

<style lang="less" scoped>
.new_strategy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .publish {
    width: 750px;
    h2 {
      font-weight: 400;
      margin-bottom: 10px;
    }
    p {
      font-size: 12px;
      color: #999;
      margin-bottom: 10px;
    }
    .title {
      margin-bottom: 25px;
    }
    .richedit {
      height: 450px;
      margin-bottom: 25px;
    }
    .selectcity {
      display: flex;
      align-items: center;
      font-size: 14px;
      span {
        color: #61636a;
      }
      .demo-autocomplete {
        margin-left: 10px;
      }
    }
    .release {
      margin-top: 20px;
      font-size: 14px;
      .release_btn {
        margin-right: 10px;
      }
      span {
        color: #ffad00;
        cursor: pointer;
      }
    }
  }
  .drafts {
    width: 250px;
    margin-left: 30px;
    border: 1px solid #ccc;
    padding: 0 10px;
    .drafts_top {
      color: #666;
      height: 40px;
      line-height: 40px;
    }
    .drafts_bottom {
      .drafts_bottom_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20px;
        .drafts_content {
          display: flex;
          flex-direction: column;
          font-size: 14px;
          span:nth-child(2) {
            color: #999;
          }
        }
      }
    }
  }
}
</style>